/**
 * Created by ClearLiang on 2019/4/20
 * Function:
 * Desc:
 */
import React, {Component} from 'react';
import {Image, StyleSheet, Text, View, TouchableWithoutFeedback} from 'react-native';


let url1 = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555765409920&di=b785e5953b8a6de971f0c5430bb6226b&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201410%2F15%2F20141015142052_aJUBr.png';
let marginValue = 5;
export default class Item_Circle extends Component {

    // 初始化state
    constructor(props) {
        super(props);
        this.state = {

        };
    }


    render() {

        return (
            <View>
                <View style={[styles.root]}>
                    <TouchableWithoutFeedback
                        onPress={this.props.onClick.bind(this,this.props.data[0].name)}
                    >
                        <View style={[styles.item,styles.center]}>
                            <Image
                                source={{uri: this.props.data[0].url}}
                                style={[styles.img,]}
                            />
                            <Text style={[styles.txt,]}>{this.props.data[0].name}</Text>
                        </View>
                    </TouchableWithoutFeedback>
                </View>
                <View style={[styles.root]}>
                    {this.init()}

                </View>
            </View>

        );
    }
    init(){
        if(this.props.data.length === 2){
            return (
                <TouchableWithoutFeedback
                    onPress={this.props.onClick.bind(this,this.props.data[1].name)}
                >
                    <View style={[styles.item,styles.center]}>
                        <Image
                            source={{uri: this.props.data[1].url}}
                            style={[styles.img,]}
                        />
                        <Text style={[styles.txt,]}>{this.props.data[1].name}</Text>
                    </View>
                </TouchableWithoutFeedback>
            );
        }else {
            return (
                <TouchableWithoutFeedback
                    style={{backgroundColor: '#ccc',}}

                >
                    <View style={[styles.item,styles.center]}>
                        <View style={[styles.img,]}>

                        </View>
                        <Text style={[styles.txtEmpty,]}>空</Text>
                    </View>
                </TouchableWithoutFeedback>
            );
        }
    }
}



// 构建样式
const styles = StyleSheet.create({
    root:{
        height:60,
        width: (Config.deviceWidth-marginValue*10)/5,
        margin:marginValue,
    },
    item: {
        flex: 1,
        flexDirection: 'column',
    },
    img: {
        width: 30,
        height: 30,
        borderRadius: 30,
    },
    txt: {
        height:15,
        fontSize: 13,
        color: 'red',
        marginTop:5,
    },
    txtEmpty: {
        height:15,
        fontSize: 13,
        color: 'white',
        marginTop:5,
    },
    center:{
        justifyContent:'center',
        alignItems:'center',
    },
});
